<template>
	<view class="pages-box rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="下载教程" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<fixed :top="configInfo.navBarHeight">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<fixed>
			<!-- #endif -->
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				width="50%" height="100rpx"></tab>
			<view class="b-1px-b"></view>
		</fixed>
		
		<block v-if="activeIndex == 0">
			<view class="mt-md radius-16 ml-md mr-md pd-md fill-base">
				<view class="flex-between">
					<view class="f-mini-title text-bold">下载地址</view>
					<view class="f-desc text-bold" :style="{color: primaryColor}"
						@tap="$util.goUrl({url: configInfo.terminal_android,openType: 'copy'})">复制链接</view>
				</view>
				<view class="pt-md f-paragraph c-title" style="word-wrap: break-word;"
				@tap="$util.goUrl({url: configInfo.terminal_android,openType: 'copy'})">{{configInfo.terminal_android}}</view>
			</view>
			<view class="mt-md radius-16 ml-md mr-md pd-md fill-base">
				<view class="flex-between">
					<view class="f-mini-title text-bold">下载二维码</view>
					<view class="f-desc text-bold" :style="{color: primaryColor}"
						@tap="toDownLoad(configInfo.terminal_android_code)">下载</view>
				</view>
				<view class="pt-md f-paragraph c-title flex-center">
					<image :src="configInfo.terminal_android_code" mode="aspectFill" class="qr-code" 
					@tap="$util.previewImage({current:configInfo.terminal_android_code ,urls: [configInfo.terminal_android_code]})"></image>
				</view>
			</view>
			<view class="mt-md radius-16 ml-md mr-md pd-md fill-base" v-if="configInfo.android_tutorial">
				<parser :html="configInfo.android_tutorial" @linkpress="linkpress" show-with-animation lazy-load>加载中...
				</parser>
			</view>
		</block>
		<block v-if="activeIndex == 1">
			<view class="mt-md radius-16 ml-md mr-md pd-md fill-base">
				<view class="flex-between">
					<view class="f-mini-title text-bold">下载地址</view>
					<view class="f-desc text-bold" :style="{color: primaryColor}"
						@tap="$util.goUrl({url: configInfo.terminal_ios,openType: 'copy'})">复制链接</view>
				</view>
				<view class="pt-md f-paragraph c-title" style="word-wrap: break-word;"
				@tap="$util.goUrl({url: configInfo.terminal_ios,openType: 'copy'})">{{configInfo.terminal_ios}}</view>
			</view>
			<view class="mt-md radius-16 ml-md mr-md pd-md fill-base">
				<view class="flex-between">
					<view class="f-mini-title text-bold">下载二维码</view>
					<view class="f-desc text-bold" :style="{color: primaryColor}"
						@tap="toDownLoad(configInfo.terminal_ios_code)">下载</view>
				</view>
				<view class="pt-md f-paragraph c-title flex-center">
					<image :src="configInfo.terminal_ios_code" mode="aspectFill" class="qr-code" 
					@tap="$util.previewImage({current:configInfo.terminal_ios_code ,urls: [configInfo.terminal_ios_code]})"></image>
				</view>
			</view>
			<view class="mt-md radius-16 ml-md mr-md pd-md fill-base" v-if="configInfo.ios_tutorial">
				<parser :html="configInfo.ios_tutorial" @linkpress="linkpress" show-with-animation lazy-load>加载中...
				</parser>
			</view>
		</block>
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				tabList: [{
					title: '安卓app下载',
					id: 0,
				}, {
					title: '苹果app下载',
					id: 1,
				}],
				activeIndex: 0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onReachBottom() {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				this.getConfigInfo()
			},
			handerTabChange(index){
				this.activeIndex = index
			},
			linkpress(res) {
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			},
			async toDownLoad(url) {
				await this.$util.checkAuth({
					type: "writePhotosAlbum"
				});
				let that = this
				uni.downloadFile({
					url: url, //图片的地址
					success: function(res) {
						const tempFilePath = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: (path) => {
								that.$util.showToast({title: '已保存到系统相册'})
							},
							fail: (err) => {
								console.log('图片保存失败', err);
							}
						});
					}
				})
				
			}
		},
	}
</script>


<style lang="scss">
	.qr-code{
		width: 240rpx;
		height: 240rpx;
	}
</style>
